import React from 'react'
import { NavBar, Icon } from 'antd-mobile'
import {getMap} from '../../api/allapi'

class Map extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
      H: 0,
      xy: [
        {
          x: 116.43244,
          y: 39.929986
        },
        {
          x: 116.424355,
          y: 39.92982
        },
        {
          x: 116.43244,
          y: 39.929986
        },
        {
          x: 116.423349,
          y: 39.935214
        },
        {
          x: 116.350444,
          y: 39.931645
        },
        {
          x: 116.351684,
          y: 39.91867
        },
        {
          x: 116.353983,
          y: 39.913855
        },
        {
          x: 116.357253,
          y: 39.923152
        },
        {
          x: 116.349168,
          y: 39.923152
        },
        {
          x: 116.354954,
          y: 39.935767
        },
        {
          x: 116.36232,
          y: 39.938339
        },
        {
          x: 116.374249,
          y: 39.94625
        },
        {
          x: 116.380178,
          y: 39.953053
        },
      ]
    }
  }
  componentDidMount() {
    this.getMapData()
    const H = document.documentElement.clientHeight - 45
    this.setState({
      H
    })
    this.initMap()
  }
  componentWillUnmount() {
    this.setState = state => {
      return
    }
  }
  backToMain = () => {
    const { history } = this.props
    history.goBack()
  }
  // 获取地图数据
  getMapData = async () => {
    const res = await getMap()
    console.log(res);
    // 此处无数据。。。
  }
  // 初始化地图
  initMap = () => {
    const BMap = window.BMap
    const map = new BMap.Map("container")
    const point = new BMap.Point(116.404, 39.945)
    map.centerAndZoom(point, 12)

    let markers = [];
    let pt = null;
    for (let i = 0; i < this.state.xy.length; i++) {
      const xyPoint = this.state.xy[i]
      pt = new BMap.Point(xyPoint.x, xyPoint.y);
      markers.push(new BMap.Marker(pt));
    }
    //最简单的用法，生成一个marker数组，然后调用markerClusterer类即可。
    const BMapLib = window.BMapLib
    new BMapLib.MarkerClusterer(map, { markers: markers });
  }
  render() {
    const { location: { state: { title } } } = this.props
    return (
      <div>
        {/* 导航 */}
        <NavBar
          mode="light"
          icon={<Icon type="left" />}
          onLeftClick={this.backToMain}
        >{title}</NavBar>
        {/* 地图 */}
        <div id="container" style={{ height: this.state.H }} />
      </div>
    )
  }
}
export default Map
